<template>
     <a-row>
        <a-col :span="5">
            <div class="org-box">
                <div class="org-box-title">组织名称</div>
                <div class="org-box-search">
                    <a-input-search v-model="searchKey"></a-input-search>
                </div>
                <div class="org-box-tree">
                  <div class="tree-wrap">
                    <a-tree
                      v-if="orgTreeData.length > 0"
                      :data="treeData"
                      :fieldNames="fieldNames"
                    >
                    <template #switcher-icon>
                      <icon-down />
                    </template>
                    <template #title="nodeData">
                        <div class="title" @click="handleOrg(nodeData)">
                            <div class="title-text">
                                <img src="@/assets/images/file_icon.png" class="icon" v-if="nodeData.parent_id === 0"/>
                                <icon-folder v-else />
                                <template v-if="index = getMatchIndex(nodeData?.org_name), index < 0">{{ nodeData?.org_name }}</template>
                                <span v-else>
                                {{ nodeData?.org_name?.substr(0, index) }}
                                <span style="color: var(--color-primary-light-4);">
                                  {{ nodeData?.org_name?.substr(index, searchKey.length) }}
                                </span>{{ nodeData?.org_name?.substr(index + searchKey.length) }}
                              </span>
                            </div>
                            <a-space size="large">
                          <a-dropdown-button>
                            <template #content>
                              <a-doption v-for="(item,i) in dropItem" :key="`drop_${i}`" @click.stop="handleSelect(nodeData,item)">
                                <span>{{item}}</span>
                              </a-doption>
                            </template>
                          </a-dropdown-button>
                        </a-space>
                        </div>
                    </template>
                </a-tree>
                  </div>
                </div>
            </div>
        </a-col>
        <a-col :span="19">
            <OrgInfoview ref="child" :orgId="orgId" type="in"></OrgInfoview>
        </a-col>
     </a-row>
     <AddOrgview :orgId="orgId" :visiable="addVisiable" :isEdit="isEdit" :type="type"  @onClose="orgDialogClose"></AddOrgview>
     <TipsView :orgId="orgId" :visiable="delVisiable" :orgName="orgName" :type="typeVal" :tipsText="tipsText" @onClose="orgDialogClose"></TipsView>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import OrgInfoview from './OrgInfoview.vue'
import AddOrgview from './AddOrgview.vue';
import TipsView from './TipsView.vue';
import { org_tree } from '@/api/orgManagement/orgManagement'
import { Message } from '@arco-design/web-vue';
const props = defineProps({
  type: String
})
const searchKey = ref("")
const orgTreeData = ref<any[]>([])
const treeData = computed(() => {
  if (!searchKey.value) return orgTreeData.value;
  return searchData(searchKey.value);
})

const searchData = (keyword) => {
  const loop = (data) => {
  const result = [];
  data.forEach(item => {
    if (item.org_name.toLowerCase().indexOf(keyword.toLowerCase()) > -1) {
      result.push({...item});
    } else if (item.children) {
      const filterData = loop(item.children);
      if (filterData.length) {
         result.push({
          ...item,
          children: filterData
        })
    }
   }
  })
    return result;
  }

  return loop(orgTreeData.value);
}

const getMatchIndex = (title) => {
  if (!searchKey.value) return -1;
  return title.toLowerCase().indexOf(searchKey.value.toLowerCase());
}

const orgId = ref(0)
const orgName = ref('')
const addVisiable = ref(false)
const delVisiable = ref(false)
const typeVal = ref('del')
const isEdit = ref(false)
const child = ref(null)
const tipsText = ref({
  title: '',
  tips: ''
})
const fieldNames = {
  key: 'code',
  title: 'org_name',
  children: 'children'
}
const dropItem = ['新增组织','编辑','删除','开通账户']
/**
 * 点击树
 */
const handleOrg = (node:any) => {
  console.log(node)
  orgId.value = node.code
  orgName.value = node.org_name
}
/**
 * 下拉事件
 */
const handleSelect = (node:any, name:string) => {
  orgId.value = node.code
  orgName.value = node.org_name
  switch(name) {
    case '新增组织':
      addVisiable.value = true
      break;
    case '编辑':
      isEdit.value = true
      addVisiable.value = true
      break;
    case '删除':
      typeVal.value = 'del'
      tipsText.value = {
        title: '是否确认删除该组织',
        tips: '删除后该组织无法恢复'
      }
      delVisiable.value = true
      break;
    case '开通账户':
      typeVal.value = 'open'
      tipsText.value = {
        title: '是否开通资产账户',
        tips: '开通生效'
      }
      delVisiable.value = true
      break;
    default:
  }
}
/**
 * 新增组织弹框事件
 */
 const orgDialogClose = (e:any) => {
  addVisiable.value = false
  delVisiable.value = false
  typeVal.value = ''
  isEdit.value = false
  getOrgTree()
  child.value.getOrgList()
}
/**
 * 获取组织树
 */
 const getOrgTree = async() => {
  let { code, data, message } = await org_tree()
  if (code === 200) {
    orgTreeData.value = [data]
    orgId.value = data.code
  } else {
    Message.error(message)
  }
}
onMounted(() => {
    getOrgTree() 
})
</script>
<style lang="less" scoped>
:deep(.arco-tree-node-title) {
    width: 100%;
    flex: 1;
}
:deep(.arco-tree-node-title-text) {
  width: 100%;
}
:deep(.arco-btn-size-medium.arco-btn-only-icon ){
  padding-top: 2px;
}
:deep(.arco-btn-secondary[type='button']) {
  background: transparent;
  border-right: none;
}
:deep(.arco-btn-icon) {
  transform: rotate(90deg);
}
.org-box {
  height: calc(100vh - 152px);
    border-right: 1px solid #EBF0FA;
    padding-right: 16px;
    &-title {
        font-size: 16px;
        font-weight: 700;
        color: #394D73;
        line-height: 24px;
        padding-top: 16px;
    }
    &-search {
        margin-top: 20px;
    }
    &-tree {
        width: 100%;
        height: calc(100vh - 360px);
        margin-top: 20px;
        .tree-wrap {
          height: 100%;
          overflow-y: scroll;
        }
        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            &-text {
                display: flex;
                align-items: center;
                :deep(.arco-icon) {
                  font-size: 16px;
                  color: #465A80;
                  margin-right: 5px;
                }
            }
            .icon {
                width: 16px;
                height: 16px;
                margin-right: 6px;
            }
        }
    }
}
</style>